<template>
	<view>
		<view class="tabs u-flex u-row-center">
			<u-tabs-swiper style="width: 400rpx;" inactive-color="#909399" :show-bar="swiperFlag" active-color="#303133" ref="uTabs" :list="navList" :current="current" @change="tabsChange" :is-scroll="false"
			font-size="32"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height:75vh">
			<swiper-item class="swiper-item">
				<scroll-view scroll-x style="height: 100%; width: 100%;">
					<view class="swiper-div-1" >
						<zaudio theme="theme1"></zaudio>
						<view class="fen u-flex u-row-around u-padding-top-20">
							<view class="" style="width: 50rpx; height: 50rpx;">
								<uni-badge size="small" :text="badgetext1" absolute="rightTop" type="warning" @click="changeLike">
								    <u-icon index="0" size="50" name="thumb-up" :color="thumbColor1" @click="changeLike"></u-icon>
								</uni-badge>
							</view>
							<view class="" style="width: 50rpx; height: 50rpx;">
								<u-icon size="50" name="zhuanfa" color="#707070" @click="onShare()"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-x style="height: 100%; width: 100%;">
					<view class="swiper-div-2">
						<y-ju></y-ju>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item-3">
				<scroll-view scroll-x style="height: 100%; width: 100%;">
					<view class="swiper-div">
						<y-wen></y-wen>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item-4">
				<scroll-view scroll-y style="height: 100%; width: 100%;">
					<view class="swiper-div-4">
						<y-ci></y-ci>
						<view class="u-flex-2">
							<u-divider class="u-margin-top-30"half-width="250">小英</u-divider>
							<view class="fen  u-flex u-row-around u-padding-top-20" style="width: 100%; height: 50rpx;">
								<view class="u-margin-top-70" style="width: 50rpx; height: 50rpx;">
										<!-- <u-icon index="0" size="20" name="thumb-up" :color="thumbColor4" @click="changeLike"></u-icon> -->
									<uni-badge size="small" :text="badgetext4" absolute="rightTop" type="warning" @click="changeLike">
									    <u-icon index="0" size="50" name="thumb-up" :color="thumbColor4" @click="changeLike"></u-icon>
									</uni-badge>
								</view>
								<view class="u-margin-top-70" style="width: 50rpx; height: 50rpx;">
									<u-icon index="1" size="50" name="zhuanfa" color="#707070" @click="onShare"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <zaudio theme="theme1"></zaudio> -->
	</view>
</template>
		</swiper>
	</view>
</template>

<script>
	import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
	export default {
		data() {
			return {
				navList: [{
					name: '乐'
				}, {
					name: '句'
				}, {
					name: '文'
				},{
					name: '词'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiperFlag:false,  //swiper取消显示下方滑条，取消字体加粗
				Url: "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
				thumbColor1:"#707070",
				thumbColor2:"#707070",
				thumbColor3:"#707070",
				thumbColor4:"#707070",
				badgetext1:0,
				badgetext2:0,
				badgetext3:0,
				badgetext4:0,
			}
		},
		onLoad() {
			
		},
		components: {
			
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onShare(){
				let shareData = {
					shareUrl:"http://music.163.com/song/media/outer/url?id=16431842.mp3",
					shareTitle:"来自小英的分享",
					shareContent:"分享的描述",
					shareImg:"http://qn.kemean.cn//upload/202004/18/1587189024467w6xj18b1.jpg",
					appId : "wxd0e0881530ee4444", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
					appPath : "pages/home/home",
					appWebUrl : "https://kemean.com/",
				};
				// 调用
				let shareObj = appShare(shareData,res => {
					console.log("分享成功回调",res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式
					closeShare();
				});
				setTimeout(() => {
					// 第二种关闭弹窗的方式
					shareObj.close();
				},5000);
			},
			changeLike(){
				if(this.current==0){
					this.thumbColor1 = "#ffaa00"
					this.badgetext1 += 1
				}else if(this.current==1){
					
				}else if(this.current==2){
					
				}else if(this.current==3){
					this.thumbColor4 = "#ffaa00"
					this.badgetext4 += 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.swiper-div-1{
	display: block;
	margin-top: 120rpx;
	height: 100%;
}
.swiper-div-4{
	display: block;
	height: 100%;
}
</style>

